<template>
	<view :class="['tag', sm?'sm':'', zClass]">
		<view
			v-for="(v,i) in items"
			:key="i"
			:class="['item', 'bg-'+color, border?'border':'', border&&color?color:'']"
			@click.stop="clickEvent(i)"
		>{{v}}<text v-if="editable" class="remove" @tap="removeHandler(i)">×</text></view>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'items':{type:Array},
			'sm':{type:Boolean},
			'color':{type:String},
			'border':{type:Boolean},
			'editable':{type:Boolean}
		},
		methods:{
			clickEvent(i){
				this.$emit('click', i)
			},
			removeHandler(i){
				this.items.splice(i, 1)
			}
		}
	}
</script>

<style lang="scss">
	.tag{
		display: flex;
		flex-wrap: wrap;
		margin: -10upx;
		.item{
			background: #eee;
			border-radius: 8upx;
			padding: 10upx 15upx;
			margin: 10upx;
			display: flex;
			align-items: center;
		}
		.border{
			background: none!important;
			border: solid 1upx #ddd;
			&.primary{
				border-color: $primary-color;
			}
			&.info{
				border-color: $info-color;
			}
			&.warning{
				border-color: $warning-color;
			}
			&.error{
				border-color: $error-color;
			}
			&.success{
				border-color: $success-color;
			}
		}
		&.sm{
			font-size: $font-size-sm;
		}
		.remove{
			font-size: 0.9em;
			opacity: 0.6;
			padding-left: 10upx;
		}
	}
</style>
